import type { App } from 'vue';
import MenuIcon from './components/icon.vue';
import SvgIcon from './components/svgIcon.vue';
import { elSvg, alSvg } from './utils/init';
// 导入样式文件，确保在打包时被包含
import './theme/iconSelector.scss';

// 样式自动注入功能
let styleInjected = false;

const injectStyles = () => {
  if (styleInjected || typeof document === 'undefined') return;

  // 检查是否已经存在样式
  const existingStyle = document.querySelector('style[data-menu-icon]');
  if (existingStyle) return;

  // 创建样式元素
  const style = document.createElement('style');
  style.setAttribute('data-menu-icon', 'true');
  style.textContent = `
    .icon-selector-warp-row{height:230px;overflow:hidden;border-radius:6px;background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1)}@media (max-width: 768px){.icon-selector-warp-row{height:160px}}.icon-selector{width:100%;height:100%;position:relative}.icon-selector .custom-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid #dcdfe6;border-radius:4px;background-color:#fff;transition:all .3s ease;overflow:hidden}.icon-selector .custom-input-wrapper:hover{border-color:#c0c4cc}.icon-selector .custom-input-wrapper:focus-within{border-color:#409eff;box-shadow:0 0 0 2px rgba(64,158,255,0.2)}.icon-selector .custom-input-wrapper.input-disabled{background-color:#f5f7fa;border-color:#e4e7ed;cursor:not-allowed}.icon-selector .custom-input-wrapper.input-disabled .custom-input{background-color:transparent;cursor:not-allowed;color:#c0c4cc}.icon-selector .custom-input-wrapper.input-disabled .prepend-icon{color:#c0c4cc}.icon-selector .custom-input-wrapper.input-small{height:28px;font-size:12px}.icon-selector .custom-input-wrapper.input-small .input-prepend{padding:0 8px}.icon-selector .custom-input-wrapper.input-small .custom-input{padding:0 8px;font-size:12px}.icon-selector .custom-input-wrapper.input-small .input-clear{width:20px;height:20px;font-size:12px}.icon-selector .custom-input-wrapper.input-default{height:32px;font-size:14px}.icon-selector .custom-input-wrapper.input-default .input-prepend{padding:0 12px}.icon-selector .custom-input-wrapper.input-default .custom-input{padding:0 12px;font-size:14px}.icon-selector .custom-input-wrapper.input-default .input-clear{width:24px;height:24px;font-size:14px}.icon-selector .custom-input-wrapper.input-large{height:36px;font-size:16px}.icon-selector .custom-input-wrapper.input-large .input-prepend{padding:0 16px}.icon-selector .custom-input-wrapper.input-large .custom-input{padding:0 16px;font-size:16px}.icon-selector .custom-input-wrapper.input-large .input-clear{width:28px;height:28px;font-size:16px}.icon-selector .input-prepend{display:flex;align-items:center;justify-content:center;background-color:#f5f7fa;border-right:1px solid #dcdfe6;color:#909399;height:100%}.icon-selector .input-prepend .prepend-icon{font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}.icon-selector .custom-input{flex:1;border:none;outline:none;background:transparent;color:#606266;font-family:inherit}.icon-selector .custom-input::placeholder{color:#c0c4cc}.icon-selector .custom-input:disabled{cursor:not-allowed;color:#c0c4cc}.icon-selector .input-clear{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#c0c4cc;transition:color .3s ease;border-radius:50%;margin-right:8px}.icon-selector .input-clear:hover{color:#909399;background-color:#f5f7fa}.icon-selector .input-clear:focus{outline:2px solid #409eff;outline-offset:2px}.icon-selector .icon-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid #e4e7ed;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);margin-top:4px;overflow:hidden;animation:dropdownFadeIn .2s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.icon-selector .icon-tabs{display:flex;border-bottom:1px solid #e4e7ed;background:#fafafa}.icon-selector .icon-tabs .tab-item{flex:1;padding:12px 16px;text-align:center;cursor:pointer;font-size:14px;color:#606266;border-bottom:2px solid transparent;transition:all .3s ease;user-select:none}.icon-selector .icon-tabs .tab-item:hover{color:#409eff;background-color:#f0f9ff}.icon-selector .icon-tabs .tab-item:focus{outline:2px solid #409eff;outline-offset:-2px}.icon-selector .icon-tabs .tab-item.tab-active{color:#409eff;border-bottom-color:#409eff;background-color:#fff;font-weight:500}.icon-selector .icon-content{position:relative}.icon-selector .icon-selector-warp-row{height:230px!important;overflow:hidden;border-radius:6px;background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.icon-selector .icon-selector-warp-row .icon-scroll-container{height:100%;overflow-y:auto;overflow-x:hidden;padding:10px}.icon-selector .icon-selector-warp-row .icon-scroll-container::-webkit-scrollbar{width:6px}.icon-selector .icon-selector-warp-row .icon-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.icon-selector .icon-selector-warp-row .icon-scroll-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.icon-selector .icon-selector-warp-row .icon-scroll-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.icon-selector .icon-selector-warp-row .icon-scroll-container{scrollbar-width:thin;scrollbar-color:#c1c1c1 #f1f1f1}.icon-selector .icon-selector-warp-row .icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0}.icon-selector .icon-selector-warp-row .icon-item{display:flex;justify-content:center;align-items:center;border:1px solid #e4e7ed;border-radius:5px;height:40px;cursor:pointer;pointer-events:auto;user-select:none;transition:all .3s ease;background-color:#fff}.icon-selector .icon-selector-warp-row .icon-item i{font-size:20px;color:#606266;pointer-events:none;transition:color .3s ease}.icon-selector .icon-selector-warp-row .icon-item:hover{cursor:pointer;background-color:#f0f9ff;border:1px solid #b3d8ff;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)}.icon-selector .icon-selector-warp-row .icon-item:hover i{color:#409eff}.icon-selector .icon-selector-warp-row .icon-item:focus{outline:2px solid #409eff;outline-offset:2px}.icon-selector .icon-selector-warp-row .icon-item-active{background-color:#f0f9ff;border:1px solid #b3d8ff}.icon-selector .icon-selector-warp-row .icon-item-active i{color:#409eff}.icon-selector .icon-selector-warp-row .icon-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#909399;padding:20px}.icon-selector .icon-selector-warp-row .icon-empty .empty-icon{font-size:48px;margin-bottom:12px;opacity:.6}.icon-selector .icon-selector-warp-row .icon-empty .empty-text{font-size:14px;text-align:center}@media (max-width: 768px){.icon-selector .custom-input-wrapper.input-small{height:26px;font-size:11px}.icon-selector .custom-input-wrapper.input-small .input-prepend{padding:0 6px}.icon-selector .custom-input-wrapper.input-small .custom-input{padding:0 6px;font-size:11px}.icon-selector .custom-input-wrapper.input-small .input-clear{width:18px;height:18px;font-size:11px}.icon-selector .custom-input-wrapper.input-default{height:30px;font-size:13px}.icon-selector .custom-input-wrapper.input-default .input-prepend{padding:0 10px}.icon-selector .custom-input-wrapper.input-default .custom-input{padding:0 10px;font-size:13px}.icon-selector .custom-input-wrapper.input-default .input-clear{width:22px;height:22px;font-size:13px}.icon-selector .custom-input-wrapper.input-large{height:34px;font-size:15px}.icon-selector .custom-input-wrapper.input-large .input-prepend{padding:0 14px}.icon-selector .custom-input-wrapper.input-large .custom-input{padding:0 14px;font-size:15px}.icon-selector .custom-input-wrapper.input-large .input-clear{width:26px;height:26px;font-size:15px}.icon-selector .icon-dropdown .icon-tabs .tab-item{padding:10px 12px;font-size:13px}.icon-selector .icon-selector-warp-row{height:160px!important}.icon-selector .icon-selector-warp-row .icon-scroll-container{padding:8px}.icon-selector .icon-selector-warp-row .icon-grid{grid-template-columns:repeat(4,1fr);gap:6px}.icon-selector .icon-selector-warp-row .icon-item{height:36px}.icon-selector .icon-selector-warp-row .icon-item i{font-size:16px}.icon-selector .icon-selector-warp-row .icon-empty .empty-icon{font-size:36px}.icon-selector .icon-selector-warp-row .icon-empty .empty-text{font-size:12px}}.icon-selector-error{color:#f56c6c;font-size:12px;padding:8px 16px;background-color:#fef0f0;border:1px solid #fbc4c4;border-radius:4px;margin-top:8px}.icon-selector-loading{color:#409eff;font-size:12px;padding:8px 16px;text-align:center;background-color:#f0f9ff;border:1px solid #b3d8ff;border-radius:4px;margin-top:8px}.icon-selector-warp-item:focus{outline:2px solid #409eff;outline-offset:2px}.icon-selector-warp-item:focus-visible{outline:2px solid #409eff;outline-offset:2px}@media (prefers-color-scheme: dark){.icon-selector .icon-dropdown{background-color:#1d1e1f;border:1px solid #4c4d4f}}
  `;

  // 注入到 head
  document.head.appendChild(style);
  styleInjected = true;
};

// 导出类型
export * from './types';

// 导出工具函数，供高级用户使用
export { elSvg, alSvg } from './utils/init';

// 检查图标是否已注册
const checkIconRegistration = (app: App) => {
  const registeredComponents = app._context?.components || {};
  const hasElementIcons = Object.keys(registeredComponents).some((key) =>
    key.startsWith('ele-')
  );
  const hasAntIcons = Object.keys(registeredComponents).some((key) =>
    key.startsWith('ali-')
  );

  if (!hasElementIcons) {
    elSvg(app);
  }
  if (!hasAntIcons) {
    alSvg(app);
  }
};

// 定义安装函数
const install = (app: App) => {
  // 自动注入样式
  injectStyles();

  // 检查并注册图标（避免重复注册）
  checkIconRegistration(app);

  // 注册组件
  app.component('MenuIcon', MenuIcon);
  app.component('SvgIcon', SvgIcon);
};

// 导出样式文件路径，供用户手动引入
export const stylePath = './dist/assets/css/index.css';

// 支持按需引入
export default {
  install,
};
